import React from "react"
import notfond from './styles/notfond.module.css'
import Navict from "../components/Navict"
import { useNavigate } from "react-router-dom"

const menu: { name: string, url: string }[] = [
    { name: "访问首页", url: "/" },
    { name: "我的书架", url: "/" },
    { name: "刷新本页", url: "#" },
]

const Notfond: React.FC = () => {
    const navigate = useNavigate()
    const onChange = (item : { name: string, url: string }) => {
        if (item.name === "刷新本页") {
            window.location.reload()
        } else {
            navigate(item.url)
        }
    }
    return (
        <div>
            <Navict />
            <div className={notfond.app}>
                <img src="https://revo.zongheng.com/www/2024/images/e3ab1f3.png" alt="" />
                <div className={notfond.text}>
                    <p>你访问的页面去熬夜追书啦~</p>
                    <p className={notfond.p}>可能的原因是：数据访问失败，请稍后再试~</p>
                </div>
            </div>
            <div className={notfond.menu}>
                <div className={notfond.item}>
                    {
                        menu.map((item,index) => (
                            <div onClick={() => onChange(item)} key={index}>{item.name}</div>
                        ))
                    }
                </div>
                <div className={notfond.contact}>
                    <p>客服QQ：4006289988 （08:00-次日02:00）</p>
                    <p>电话：4006289988</p>
                </div>
            </div>
        </div>
    )
}

export default Notfond